<template>
	<view>
		<myhead :status="true"></myhead>
		<view class="songplay">
			<view class="title" v-for="(item,index) in songs" :key="index">

				<view class="center">

					<view class="needle">
						<image class="playButton" :src="isPlaying ? '../../static/play.png' : '../../static/stop.png'"
							@tap="togglePlay"></image>
						<image :src="songImg" mode="" class="song-image" :class="{ 'rotating-song-image' : isPlaying }"
							@tap="togglePlay"></image>
					</view>
				</view>

			</view>
			<!-- <image class="playButton" src="../../static/play.png"  mode=""></image> -->
			<scroll-view class="lyrics-container" scroll-y style="text-align: center;">
				<!-- <view class="lyrics">{{lyrics}}</view> -->
				<view v-for="(item,index) in lyrics" :key="index" :style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 30  + 'rpx)' }" :class="{ 'active' : lyricIndex === index }">
					{{item.time}}-{{ item.lyric }}
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		songDetail,
		songUrl,
		lyric
	} from '../../common/api.js'
	export default {
		data() {
			return {
				songs: [],
				audio: null,
				isPlaying: false,
				lyrics: '',
				pageTitle: '歌曲播放页',
				songImg: "",
				lyricIndex: 0,
			}
		},
		  onLoad(options) {
		    this.setPageTitle(); // 设置页面标题
		
		    songDetail(options.id).then((res) => {
		      this.songs = res.songs;
		      this.pageTitle = res.songs[0].name; // 更新页面标题为歌曲名
		      this.setPageTitle(); // 更新页面标题
		      this.songImg = res.songs[0].al.picUrl;
		      console.log(res.songs[0].al.picUrl);
		    });
		
		    songUrl(options.id).then((res) => {
		      this.audio = uni.createInnerAudioContext();
		      this.audio.src = res.data[0].url;
		      this.audio.onEnded(() => {
		        this.isPlaying = false;
		      });
		      this.audio.onTimeUpdate(() => { // 这里添加监听时间更新事件
		        this.listenLyricIndex(this.audio.currentTime);
		      });
		    });
		
		    lyric(options.id).then((res) => {
		      let lyric = res.lrc.lyric;
		      let result = [];
		      let re = /\[([^\]]+)\]([^[]+)/g;
		      lyric.replace(re, ($0, $1, $2) => {
		        result.push({
		          time: this.formatTimeToSec($1),
		          lyric: $2
		        });
		      });
		      this.lyrics = result;
		    });
		
		  },
		  onUnload() {
		    // 移除时间更新监听器（若需要在页面卸载时移除）
		    if (this.audio) {
		      this.audio.offTimeUpdate();
		      if (this.isPlaying) {
		        this.audio.stop();
		      }
		      this.audio.destroy();
		    }
		  },
		
		methods: {
			// 设置页面标题
			setPageTitle() {
				uni.setNavigationBarTitle({
					title: this.pageTitle
				});
			},
			
		listenLyricIndex(currentTime) {
		  let currentLyricIndex = -1;
		  for (let i = 0; i < this.lyrics.length; i++) {
		    if (currentTime >= this.lyrics[i].time) {
		      currentLyricIndex = i;
		    } else {
		      break;
		    }
		  }
		
		  this.lyricIndex = currentLyricIndex;
		},

			// 切换播放状态
			togglePlay() {
				if (this.isPlaying) {
					this.audio.pause();
				} else {
					this.audio.play();
				}
				this.isPlaying = !this.isPlaying;

			},
			//处理时间
			formatTimeToSec(time) {
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			}

		}
	}
</script>

<style scoped>
	.center {
		width: 750rpx;
		height: 700rpx;
	}

	.title {
		background-image: url("../../static/disc.png");
		background-size: 500rpx 500rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-position-y: 70%;
		position: relative;
	}

	.title .needle {
		height: 500rpx;
		background-image: url("../../static/needle.png");
		background-repeat: no-repeat;
		background-position-x: 40%;
		background-size: 200rpx 200rpx;
	}

	.title image {
		margin: auto;
		height: 330rpx;
		width: 330rpx;
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.title .playButton {
		height: 75rpx;
		width: 75rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.lyrics-container {
		height: 400rpx;
		overflow: hidden;
	}

	.lyrics {
		background-color: darkgray;
		white-space: pre-line;
	}

	.song-image {
		width: 320rpx;
		height: 320rpx;
		border-radius: 60%;
	}

	/* 添加旋转动画 */
	@keyframes rotateImg {
		0% {
			margin-left: -165rpx;
			margin-top: -165rpx;
			transform: rotate(0deg);
		}

		100% {
			margin-left: -165rpx;
			margin-top: -165rpx;
			transform: rotate(360deg);
		}
	}

	.rotating-song-image {
		width: 380rpx;
		height: 380rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
		animation: 10s linear infinite rotateImg;
		animation-play-state: isplay;
	}

	.active {
		color: red;
		/* 或者其他你想要的高亮样式 */
		font-weight: bold;
	}
</style>